<template>
  <div class="mine">
    <div class="mineTitle">
      <div class="titleBox">
        <div class="head"></div>
      <div class="titleRight"
      is="router-link"
      to="/login"
      tag="div"
      >
        <span>立即登录</span>
      <van-icon name="arrow" />
      </div>
      </div>
    </div>
    <div class="mineList">
      <div class="listPont">
        <span class="iconfont" style="font-size:35px;opacity: 0.3">&#xe7b3;</span>
        <div class="listRight"
        is="router-link"
        to="/personalData"
        tag="div"
        >
          <span>个人资料</span>
          <van-icon name="arrow" />
        </div>
      </div>
       <div class="listPont">
        <span class="iconfont" style="font-size:35px;opacity: 0.3">&#xe736;</span>
        <div class="listRight">
          <span>咖啡钱包</span>
          <van-icon name="arrow" />
        </div>
      </div>
       <div class="listPont">
        <span class="iconfont" style="font-size:35px;opacity: 0.3">&#xe69b;</span>
        <div class="listRight">
          <span>优惠券</span>
          <van-icon name="arrow" />
        </div>
      </div>
       <div class="listPont">
        <span class="iconfont" style="font-size:35px;opacity: 0.3">&#xe62e;</span>
        <div class="listRight">
          <span>优惠兑换</span>
          <van-icon name="arrow" />
        </div>
      </div>
       <div class="listPont">
        <span class="iconfont" style="font-size:35px;opacity: 0.3">&#xe66c;</span>
        <div class="listRight">
          <span>发票管理</span>
          <van-icon name="arrow" />
        </div>
      </div>
       <div class="listPont">
        <span class="iconfont" style="font-size:35px;opacity: 0.3">&#xe629;</span>
        <div class="listRight">
          <span>帮助中心</span>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Icon } from 'vant'

Vue.use(Icon)
export default {
  name: 'mine-index',
  data () {
    return {
      loginStatus: false
    }
  },
  created () {

  }
}
</script>

<style lang="scss" scoped>
.titleBox{
  padding: 0 20px;
  height: 145px;
  // line-height: 100px;
  background-color: rgb(226, 55, 55);
  display: flex;
  align-items: center;
  justify-content: space-between;
  .titleRight{
    display: flex;
    flex: 1;
    justify-content: space-between;
    margin-left: 8px;
  }
  .head{
    width: 33px;
    height: 33px;
    background-color: #fff;
    border-radius: 50%;
  }
}
.mineList{
  padding: 2px 20px;
  .listPont{
    height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  margin-top: 8px;
  .listRight{
     display: flex;
    flex: 1;
    justify-content: space-between;
    margin-left: 8px;
  }
  }
}
</style>
